import React from 'react'
import { Image, StyleSheet, Text, View, ScrollView } from 'react-native';
import { Button, Input, Layout, Radio, Avatar } from '@ui-kitten/components';
import { Link } from 'expo-router';
export default function emailScreen() {
  const [checked, setChecked] = React.useState(false);
  const [form, setForm] = React.useState({
    email: '',
    code: ''
  });

  return (
    <ScrollView keyboardShouldPersistTaps='always'>
      <Text style={{ textAlign: 'center', fontSize: 20, marginTop: 130 }}>登录账号</Text>
      <View style={{ paddingLeft: 10, paddingRight: 10, marginTop: 80 }}>
        <Input
          placeholder='请输入邮箱号'
          value={form.email}
          size='medium'
          style={{ ...styles.input }}
          onChangeText={value => setForm({ ...form, email: value })}
        />
        <Layout style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' }}>
          <Input
            style={{ ...styles.input, flex: 1, marginTop: 10 }}
            placeholder='请输入验证码'
            size='medium'
            value={form.code}
            onChangeText={value => setForm({ ...form, code: value })}
          />
          <Text style={{ marginRight: 10, color: "#999999" }}>获取验证码</Text>
        </Layout>
      </View>
      <Button style={{ width: 320, borderRadius: 50, margin: 'auto', marginTop: 100 }}>登录</Button>
      <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'center', marginTop: 20}}>
        <Radio
          checked={checked}
          onChange={nextChecked => setChecked(nextChecked)}
        ></Radio>
        <Text style={{marginLeft: 10, fontSize: 14}}>我已阅读同意《用户协议》和《隐私政策》</Text>
      </View>
      <Link style={{ margin: 'auto', marginTop: 30 }} href='/email' >
        <View>
          <Image source={require('../assets/images/wechat.png')} style={{ width: 26, height: 26, margin: 'auto', }}></Image>
          <Text style={{
            textAlign: 'center',
            fontSize: 16,
            marginTop: 10,
            fontFamily: 'Alibaba PuHuiTi 3.0-55 Regular'
          }}>微信登录</Text>
        </View>
      </Link>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  input: {
    backgroundColor: 'transparent',
    borderWidth: 0,
    height: 32
  },
});